<template>
    <!-- 饼状图 -->
  <div class='chart-wrap'>
    <div  ref="chartsBuss" class="chart-content" v-show="chatData?.length"></div>
    <el-empty description="暂无数据"  v-show="!chatData?.length"/>
  </div>
</template>

<script setup>
  import * as echarts from 'echarts';
  import {getChartSBussOption } from '../../echartOption'
  import { reactive } from 'vue';
  const props = defineProps({
    statisticData:{
      type:Array,
      default:()=>[]
    }
  })
  let chatData = reactive([])
  let echartsInstance = shallowRef(null);
  let chartsBuss = shallowRef();
  const initChart = ()=>{
    const chatDataX = chatData?.map(ele => ele.visitTime) || [];
    const dataYsBuss = chatData?.map(item => item.num) || [];
    echartsInstance.value = null;
    echartsInstance.value = echarts.init(chartsBuss.value, null, {renderer:'svg'})
    const option = getChartSBussOption(chatDataX,dataYsBuss)
    echartsInstance.value.setOption(option,true)
    window.addEventListener('resize', resize);
  }

  const resize = () =>{
    if(echartsInstance.value){
      echartsInstance.value?.resize()
    }
  }
  onUnmounted(() => {
    // 组件卸载时销毁图表实例
    if(echartsInstance.value){
      echartsInstance.value.dispose();
    }
  });

  watch(() => props.statisticData,(newValue)=>{
    chatData = newValue;
    nextTick(() => {
      initChart()
      resize()
    })
  },
  {
    deep: true,
    immediate: true
  })
</script>
<style lang="scss" scoped>
  .chart-wrap{
    width: 49%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    .chart-content{
      width: 100%;
      height: 100%;
    }
  }
</style>
